<template>
	<router-layout>
	<div class="pageBg">
		<div>
			<div class="header">
				<van-icon name="arrow-left" class="back" @click="routerBack" />
					新增乘客
			</div>
			<van-form >
				<van-field v-model="name" label="乘客姓名" placeholder="请填写真实姓名" clearable @focus="onFocus"/>
				<van-field v-model="cardtype" label="证件类型" readonly />
				<van-field v-model="id_Card" label="证件号码" placeholder="请填写证件号码" readonly  @touchstart.native.stop="show = true"/>
				<van-field v-model="mobile" label="手机号码" placeholder="请填写手机号码" clearable type="tel" @focus="onFocus"/>
				<van-field name="radio" label="乘客类型">
				  <template #input>
				    <van-radio-group v-model="tick_type" direction="horizontal">
				      <van-radio name="1">成人</van-radio>
				      <van-radio name="2">儿童(1.2~1.5米)</van-radio>
				    </van-radio-group>
				  </template>
				</van-field>
				<van-field name="radio" label="性别">
				  <template #input>
				    <van-radio-group v-model="sex" direction="horizontal">
				      <van-radio name="1">男</van-radio>
				      <van-radio name="2">女</van-radio>
				    </van-radio-group>
				  </template>
				</van-field>
				<div class="btn">
					<van-button block type="info" native-type="submit" class="submit" :class={disabled:disabled} @click="submit">提交</van-button>
				</div>
			</van-form>
		</div>
		<!--  -->
		<van-number-keyboard
		  v-model="id_Card"
		  :show="show"
		  extra-key="X"
		  close-button-text="完成"
		  @blur="show = false"
		/>
	</div>
	</router-layout>
</template>

<script>
	import authMixin from '@/mixin/mixin'
export default {
	data() {
		return {
			cardtype:'身份证',
			name:'',
			id_Card:'',
			mobile:'',
			tick_type:'1',
			sex:'1',
			disabled:true,
			show:false,
			StartPrintName:'',
			StationCode: '',
			StopCode:'',
			StopName:'',
			EndStopName: '',
			DepartTime: '',
			ScheduleCode: '',
			ArriveTime: '',
			date: '',
			Week: '',
			Price: 0,
			HalfPrice: 0
		}
	},
	mixins:[authMixin],
	created(){
		this.getRouterData()
	},
	mounted(){},
	methods: {
		getRouterData(){
			  this.StopCode = this.$route.query.StopCode
				this.StartPrintName = this.$route.query.StartPrintName
				this.StopName = this.$route.query.StopName
				this.EndStopName = this.$route.query.EndStopName
				this.ScheduleCode = this.$route.query.ScheduleCode
				this.DepartTime = this.$route.query.DepartTime
				this.date = this.$route.query.date
				this.Week = this.$route.query.Week
				this.StationCode = this.$route.query.StationCode
				this.Price = Number(this.$route.query.Price).toFixed(2)
				this.HalfPrice = Number(this.$route.query.HalfPrice).toFixed(2)
				if(this.$route.query.ArriveTime!== 'undefined'){
					this.ArriveTime = this.$route.query.ArriveTime
					this.HasArriveTime = true
				}else{
					this.HasArriveTime = false
				}
			},
		routerBack() {
			this.$router.back();
		},
		onFocus(){
			this.show = false
		},
		isIdCard(idCard){
			/**
			 * 身份证15位编码规则：dddddd yymmdd xx p dddddd：6位地区编码 yymmdd: 出生年(两位年)月日，如：910215 xx:
			 * 顺序编码，系统产生，无法确定 p: 性别，奇数为男，偶数为女
			 * 
			 * 身份证18位编码规则：dddddd yyyymmdd xxx y dddddd：6位地区编码 yyyymmdd:
			 * 出生年(四位年)月日，如：19910215 xxx：顺序编码，系统产生，无法确定，奇数为男，偶数为女 y: 校验码，该位数值可通过前17位计算获得
			 * 
			 * 前17位号码加权因子为 Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ] 验证位
			 * Y = [ 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ] 如果验证码恰好是10，为了保证身份证是十八位，那么第十八位将用X来代替
			 * 校验位计算公式：Y_P = mod( ∑(Ai×Wi),11 ) i为身份证号码1...17 位; Y_P为校验码Y所在校验码数组位置
			 */
				// 15位和18位身份证号码的正则表达式
				var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
				if (regIdCard.test(idCard)) {
					if (idCard.length == 18) {
						var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10,
								5, 8, 4, 2); // 将前17位加权因子保存在数组里
						var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); // 这是除以11后，可能产生的11位余数、验证码，也保存成数组
						var idCardWiSum = 0; // 用来保存前17位各自乖以加权因子后的总和
						for (var i = 0; i < 17; i++) {
							idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
						}
			
						var idCardMod = idCardWiSum % 11;// 计算出校验码所在数组的位置
						var idCardLast = idCard.substring(17);// 得到最后一位身份证号码
			
						// 如果等于2，则说明校验码是10，身份证号码最后一位应该是X
						if (idCardMod == 2) {
							if (idCardLast == "X" || idCardLast == "x") {
								//alert("恭喜通过验证啦！");
								return true;
							} else {
								//alert("身份证号码错误！");
								return false;
							}
						} else {
							// 用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
							if (idCardLast == idCardY[idCardMod]) {
								return true;
							} else {
								return false;
							}
						}
					}else{
						return true;
					}
				} else {
					return false
				}
		},
		submit(){
			let reg = /^[1][3,4,5,7,8][0-9]{9}$/ //手机号正则验证
			let mobile = this.mobile
			let name = this.name 
			let id_Card = this.id_Card
			let tick_type = this.tick_type
			let sex = this.sex
			if (!name) {
				this.$toast({
					message: '请输入姓名',
					forbidClick: true,
				})
				return
			}else if (!id_Card) {
				this.$toast({
					message: '请输入身份证号码',
					forbidClick: true,
				})
				return
			}else if (!this.isIdCard(id_Card)) {
				this.$toast({
					message: '请输入正确的身份证号码',
					forbidClick: true,
				})
				return
			}else if (!mobile) {
				this.$toast({
					message: '请输入手机号码',
					forbidClick: true,
				})
				return
			}else if (!reg.test(mobile)) {
				this.$toast({
					message: '请输入正确的手机号码',
					forbidClick: true,
				})
				return
			}else{
				this.submitData()
			}
		},
		submitData(){
			this.$http({
				method:'post',
				url:'idcard/add',
				data:{
					name: this.name,
					id_card: this.id_Card,  
					mobile: this.mobile,   
					sex: this.sex,
					ticket_type: this.tick_type
				}
			}).then(res=>{
			   console.log(res)
				 if(res.code == 200 || res.messgae == '成功'){
					 this.$toast.clear()
					 this.$toast.success({
						 message:'添加成功',
						 duration:300,
						 forbidClick:true
					 })
					 setTimeout(()=>{
						 this.$router.replace({
							 path:'/order',
							 query:{
							 	StartPrintName: this.StartPrintName,
							 	StopName: this.StopName,
							 	EndStopName: this.EndStopName,
							 	ScheduleCode: this.ScheduleCode,
							 	DepartTime: this.DepartTime,
							 	date: this.date,
							 	Week: this.Week,
							 	StationCode: this.StationCode,
								StopCode: this.StopCode,
							 	Price: this.Price,
							 	HalfPrice:this.HalfPrice,
							 	ArriveTime:this.ArriveTime
							 }
						 })
					 },400)
				 }else{
					 this.$toast(res.msg)
				 }
			})
			////
		}
	}
}
</script>
<style scoped>
.pageBg {
	height: 100vh;
}
.back {
	margin-left: 0.3rem;
	font-size: 0.55rem;
	color: #999;
	text-align: center;
}
.header{
	position: relative;
	display: flex;
	align-items: center;
	padding: .25rem 0;
	background: #fff;
	margin-bottom: .3rem;
	justify-content: center;
	font-size: 0.4rem;
}
.header .back{
	display: block;
	position: absolute;
	left:.3rem;
	top:50%;
	transform: translate(-50%,-50%);
}
.btn{
	margin: .5rem .3rem .3rem .3rem;
}
.submit{
	background: linear-gradient(45deg, #62b0fb, #438bf7);
	border-radius: 1.1rem;
	width: 100%;
	height: 1.1rem;
	line-height: 1.1rem;
	text-align: center;
	color: #fff;
	font-size: 0.43rem;
	letter-spacing: 0.02667rem;
	box-shadow: 0.05333rem 0.13333rem 0.4rem rgba(93, 170, 250, 0.4);
	border: none !important;
}
.btn{
	position: fixed;
	left:.3rem;
	right:.3rem;
	bottom: .3rem;
	z-index: 1;
}
/* .disabled{
	opacity: .5;
} */
</style>
